<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>腾讯地图小助手</title>
<!--    <link rel="stylesheet" href="./addrHelper.css">-->
<!--    <script src="./data/geometries.js"></script>-->
</head>

<body>
    <div id="map"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.6.8/layui.js"
        integrity="sha512-lH7rGfsFWwehkeyJYllBq73IsiR7RH2+wuOVjr06q8NKwHp5xVnkdSvUm8RNt31QCROqtPrjAAd1VuNH0ISxqQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer">
    </script>
    <script>
        layui.config({
            base: './'
        }).use(["addrHelper"], function () {
            const addrHelper = layui.addrHelper
            const layer = layui.layer
            // console.log(addrHelper)

            // 打开坐标拾取器
            addrHelper.render({
                key: "", //必传，腾讯地图api key 申请方法见：https://lbs.qq.com/webApi/javascriptGL/glGuide/glBasic
                // el: '#map', //可选项，渲染容器，为空则以弹窗形式打开 默认为空
                lat: 30.03033, //可选项，初始化纬度
                lng: 120.5802, //可选项，初始化经度
                zoom: 13, //可选项，地图缩放级别 默认值13
                width: "80vw", //可选项，弹窗的宽度 默认80vw
                height: "80vh", //可选项，弹窗的高度 默认80vh
                cssDebug: false, //可选项，主要为开发时调试样式
                created: function () { //可选项，地图被创建后回调
                    // 绘制不可编辑的多边形
                    // this.drawMultiPolygon(
                    //     {
                    //         red: {
                    //             color: "rgba(208, 80, 80, 0.16)",
                    //             borderColor: "rgba(208, 80, 80, 1)",
                    //         },
                    //         blue: {
                    //             color: "rgba(55, 119, 255, 0.16)",
                    //             borderColor: "rgba(55, 119, 255, 1)",
                    //         }
                    //     },
                    //     redGeometries
                    // )
                    // 绘制可编辑的多边形
                    // this.drawMultiPolygon(
                    //     {
                    //         green: {
                    //             color: "rgba(64, 160, 128, 0.16)",
                    //             borderColor: "rgba(64, 160, 128, 1)",
                    //         },
                    //     },
                    //     greenGeometries,
                    //     true
                    // )
                },
                success: function (res) { //可选项，确认后回调
                    //addressInfo 选中的地址, geometryPaths 选中的区域坐标
                    console.log(res)
                    if (res.addressInfo === null) {
                        layer.msg("请选择地址后再提交", {icon: 2})
                        return
                    }
                    // if (res.geometryPaths) {
                    //     console.log(this.isPointInPolygon(res.addressInfo, res.geometryPaths) ? '点在所选范围内' : '点在所选范围外')
                    //     console.log(this.isPolygonIntersect(res.geometryPaths, res.geometryPaths) ? '区域之间有重叠' : '区域之间无重叠')
                    // }
                    layer.alert(JSON.stringify(res))
                    // this.close() //关闭坐标拾取器
                }
            })
        })
    </script>
</body>

</html>